<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script src="../../Script/dojo/dojo.js" djConfig="parseOnLoad: true"></script>
    <script src="./js/Car.js" type="text/javascript"></script>
    <script type="text/javascript">
        dojo.require("dojo.data.ItemFileReadStore");
        dojo.require("dijit.Tree");
        dojo.addOnLoad(function () {
            var store = new dojo.data.ItemFileReadStore({url: 'Car.js'});
            var treeModel = new dijit.tree.ForestStoreModel({
                store: store,
                query: {
                    "type": "brand"
                },
                rootId: "root",
                rootLabel: "root",
                childrenAttrs: ["children"]
            });
//            当用户点击了一个叶子节点, 此方法将被调用
            var onOpen = function (item) {
                var type = store.getValue(item, 'type');
                dojo.byId('content').innerHTML = "您点击了车型" + store.getLabel(item);
            };
//            当用户关闭了一个非叶子节点，此方法被调用
            var onClose = function (item) {
                var tyep = store.getValue(item, 'type');
                dojo.byId('content').innerHTML = "您关闭了品牌" + store.getLabel(item);
            };
            var treeDijit = new dijit.Tree({
                showRoot: false,
                model: treeModel,
                onClick: onClick,
                openOnClick: true,
                onOpen: onOpen,
                onClose: onClose
            }, "tree");
            treeDijit.domNode.style.width = "20%";
            if(dojo.isIE)
                treeDijit.domNode.stylr.styleFloat = "left";
            else
                treeDijit.domNode.stylr.cssFloat = "left";
        });
    </script>
    <link rel="stylesheet" type="text/css" href="../../Script/dijit/themes/tundra/tundra.css"/>
</head>
<body class="tundra">
<div id="tree"></div>
<div dir="content" style="width: 80%;float:right;">
    <p>内容展示区</p>
</div>
</body>
</html>
